<template>
    <view>
        <c-nav-bar title="注册" navStyle="white"></c-nav-bar>
        <!-- 状态栏间隔槽组件 -->
        <c-gap-status />

        <!-- 导航栏间隔槽组件 -->
        <c-gap-nav />
        <view>
            <image :src="$c.config.media + 'mini/bg.png'" class="index-bg" mode=""></image>
            <view class="content">
                <image :src="$c.config.media + 'mini/login-bg.png'" class="index-bg" mode=""></image>

                <image :src="$c.config.media + 'mini/login-logo.png'" class="index-icon"></image>
                <view class="input-section">
                    <view class="input-title">手机号</view>
                    <input class="input-content" type="number" maxlength="11" v-model="data.phone" placeholder="请输入11位手机号" />
                    <view class="input-code">
                        <input class="input-content" maxlength="6" style="margin-top: 20rpx" type="number" v-model="data.code" placeholder="请输入验证码" />
                        <text style="z-index: 3; display: block" :class="isCountDown ? 'on' : ''" @tap.stop="getSmsCode()">{{ countDownText }}</text>
                    </view>
                </view>
                <view class="input-section">
                    <view class="input-title">密码</view>
                    <input class="input-content" type="password" v-model="data.password" placeholder="请输入6-16位密码" />
                </view>
                <view class="login-input" @tap="login" :style="'background-image: url(' + $c.config.media + 'mini/login-btn.png);'">立即注册</view>
                <view class="login-agreement">
                    如果继续，代表您同意
                    <text @tap.stop="$c.jump('/pages/site/richview?url=/apa/protocol&title=协议')">《用户协议及隐私政策》</text>
                    <view>严禁用户进行任何不正当或非法活动</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import cGapStatus from '@/components/c-gap-status.vue';
import cGapNav from '@/components/c-gap-nav.vue';
import cNavBar from '@/components/c-nav-bar.vue';
import registerSex from '@/pages/register/register-components/register-sex.vue';
import registerNickname from '@/pages/register/register-components/register-nickname.vue';
import registerBrithday from '@/pages/register/register-components/register-brithday.vue';
import registerStature from '@/pages/register/register-components/register-stature.vue';
import registerWeight from '@/pages/register/register-components/register-weight.vue';
import registerWork from '@/pages/register/register-components/register-work.vue';
import registerAddress from '@/pages/register/register-components/register-address.vue';
import registerAvther from '@/pages/register/register-components/register-avther.vue';
import registerShuru from '@/pages/register/register-components/register-shuru.vue';
export default {
    data() {
        return {
            $c: this.$c,
            current: 0,
            swiperHeight: 0,
            data: {
                device: '478ca4671a993355',
                sex: '1',
                nickname: '',
                birthday: '',
                height: '',
                weight: '',
                career: '',
                income: '',
                save_city: '',
                avatar: '',
                phone: '',
                code: '',
                password: '',
                phone_model: 'RMX3366'
            },
            isCountDown: false, // 是否正在倒计时
            countDownText: '发送验证码' // 倒计时文本
        };
    },
    onLoad() {
        this.data = uni.getStorageSync('registerInfo');
    },
    methods: {
        /**
         * 获取短信验证码
         */
        getSmsCode() {
            console.log(this.isCountDown);
            if (this.isCountDown) return;
            this.$c.sendSms(this.data.phone, 1, (res) => {
                if (!this.isCountDown) {
                }
                this.isCountDown = res[0];
                this.countDownText = res[0] ? res[1] + 's后再发送' : '发送验证码';
            });
        },
        async login() {
            let rule = {
                'phone|手机': 'require|mobile',
                'password|密码': 'require|length:6,20',
                'code|验证码': 'require'
            };
            let res = await this.$c.post('/apa/register', this.data);
            if (res.status === 0) {
                this.$c.show(res.message);
                return;
            }
            uni.setStorageSync('rongcloud_token', res.data.rongcloud_token);
            uni.setStorageSync('token', res.data.token);
            uni.setStorageSync('user', res.data.user);

            if (!res.data.user.man_verify_is_pay) {
                // this.$c.show('注册成功', 'success', 1000, '/pages/home/home', 3);
                this.$c.show('注册成功', 'success', 1000, '/pages/ditu/ditu', 3);
            } else {
                if (res.data.user.sex == 2) {
                    this.$c.show('注册成功', 'success', 1000, '/pages/ditu/ditu', 3);
                } else {
                    // 注册成功后发消息
                    await this.$c.post('/apa/user/autoSendMessage');
                    this.$c.show('注册成功', 'success', 1000, '/pages/register/join', 3);
                }

                // this.$c.show('注册成功', 'success', 1000, '/pages/register/join', 1);
            }
        }
    },
    components: {
        registerSex,
        registerShuru,
        registerAddress,
        registerNickname,
        registerWork,
        registerBrithday,
        registerAvther,
        registerWeight,
        registerStature,
        cGapStatus,
        cGapNav,
        cNavBar
    }
};
</script>

<style lang="scss">
.index-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
page {
    color: #fff;
}
.index-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.content {
    width: 750rpx;
    background-size: 100%;
}
.index-icon {
    width: 300rpx;
    height: 246rpx;
    display: block;
    margin: 0 auto;
}
.input-section {
    border-radius: 24rpx;
    width: 694rpx;
    margin: 0 auto;
    background: #221f30;
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
    padding: 0 20rpx;
    box-sizing: border-box;
    padding-bottom: 32rpx;
    position: relative;
    margin-bottom: 56rpx;
    .input-title {
        padding: 32rpx 0;
    }
    .input-content {
        padding: 20rpx 20rpx;
        background: #363646;
        border-radius: 8rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #7d7d96;
        line-height: 44rpx;
    }
    .input-wj {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #806ef9;
        line-height: 32rpx;
        position: absolute;
        right: 20rpx;
        top: 32rpx;
    }
}
.login-input {
    width: 542rpx;
    height: 96rpx;
    background-size: 100% 100%;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 96rpx;
    text-align: center;
    margin: 0 auto;
}

.login-agreement {
    text-align: center;
    color: #888888;
    font-size: 26rpx;
    padding: 20rpx 22rpx;
    line-height: 36rpx;
    text-align: center;
    margin-top: 40rpx;
    .icon {
        font-size: 38rpx;
        color: #fff;
        margin-right: 8rpx;
        &.icon-tubiao-danxuandianji {
            color: #806ef9;
        }
    }
    text {
        color: #806ef9;
    }
}
.input-code {
    position: relative;
    text {
        color: #ffffff;
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        font-weight: 400;
    }
}
</style>
